<template>
  <div class="comment_container">
    <!-- 背景图层 -->
    <div class="backgroundImg">
      <img src="../../assets/images/backg.jpg" alt="背景图" />
    </div>
    <div class="title">
      <span class="title_text">弹幕区 | 留言板</span>
    </div>
    <!-- 弹幕展示区 -->
    <div class="barrages-drop">
      <!-- 留言板标题 -->
      <vue-baberrage
          :isShow="barrageIsShow"
          :barrageList="barrageList"
          :maxWordCount="maxWordCount"
          :throttleGap="throttleGap"
          :loop="barrageLoop"
          :boxHeight="boxHeight"
          :boxWidth="boxWidth"
          :messageHeight="messageHeight"
          :lanesCount="lanesCount"
          style="width: 100%; height: 550px; background: rgba(0, 0, 0, 0.6); border-radius: 10px; overflow: hidden;"
      >
      </vue-baberrage>
      <!-- 输入框区域 -->
      <div class="addMain">
        <el-input
            placeholder="请输入留言..."
            v-model.trim="input"
            class="input-with-select"
            @keyup.enter.native="addContent"
            :style="{ 'border-radius': '30px', 'padding-left': '15px' }"
        >
          <el-button
              slot="append"
              icon="el-icon-edit"
              @click="addContent"
              :style="{ 'border-radius': '50%', 'background-color': '#409EFF', 'color': '#fff' }"
          ></el-button>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import { MESSAGE_TYPE } from "vue-baberrage";
import { nanoid, random } from "nanoid";

export default {
  data() {
    return {
      barrageIsShow: true, // 是否展示弹幕
      messageHeight: 3, // 消息高度(测试不生效)
      barrageLoop: false, // 是否循环播放
      maxWordCount: 2, // 弹幕字数(测试不生效)
      lanesCount: 1, // 固定弹幕(测试不生效)
      boxWidth: 1600, // 弹幕宽度
      boxHeight: 200, // 弹幕高度(测试不生效)
      throttleGap: 3000, // 消息间隔
      input: "",
      // 弹幕列表，格式为数组
      barrageList: [],
      barrage: {
        id: "",
        avatar: "",
        msg: "",
        time: "",
        type: MESSAGE_TYPE.NORMAL,
        barrageStyle: "",
      },
    };
  },
  methods: {
    addContent: _.throttle(async function () {
      // 判断文本内容是否为空或者无意义的数字或字母
      if (this.input.trim() === '' || /^\d+$/.test(this.input) || /^[a-zA-Z]+$/.test(this.input)) {
        this.$message.info({
          message: "请不要输入无意义的内容",
          duration: 1000
        });
        return;
      }
      // 文本框内容赋值给barrage
      this.barrage.msg = this.input;
      //获取用户信息-->并将用户头像赋值给barrage，使得可以在弹幕中显示发送弹幕人的头像
      const userId = window.sessionStorage.getItem("userId");
      const { data: res1 } = await this.$http.get(
          "user/get_information/" + userId
      );
      if (res1.status !== 200) {
        return this.$message.error(res1.msg);
      }
      this.$message.success({ message: res1.msg, duration: 1000 });
      this.barrage.avatar = res1.data.avatar;
      // 向数据库发送请求 addComment
      const { data: res } = await this.$http.post('user/add_comment', this.barrage);
      if (res.status !== 200) {
        return this.$message.error(res.msg);
      }
      // 调用获取新的留言列表
      this.getCommentList();
      // 重置输入框内容
      this.input = "";
      this.$message.success(res.msg);
    }, 5000, { trailing: false }),

    async getCommentList() {
      // 获取留言列表
      const { data: res } = await this.$http.get("user/get_commentlist");
      if (res.status !== 200) {
        return this.$message.error(res.msg);
      }
      this.barrageList = res.data;
      // 添加空对象，数组更新，触发组件更新
      this.barrageList.push({});
    },
  },

  mounted() {
    this.getCommentList();
  }
};
</script>

<style lang="less" scoped>
.comment_container {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.backgroundImg {
  position: absolute;
  height: 100%;
  width: 100%;
  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: blur(1px); /* 添加背景模糊效果 */
    opacity: 0.4; /* 背景透明度 */
  }
}

.barrages-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 20px;
}

.title {
  position: absolute;
  top: 20px; /* 标题距离顶部一定距离 */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* 标题阴影效果 */
  z-index: 10;
  animation: fadeIn 1.5s ease-out; /* 标题渐现动画 */
}

.title_text {
  font-family: "Arial", sans-serif;
  letter-spacing: 2px;
  color: #fff;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.addMain {
  position: fixed;
  bottom: 70px; /* 输入框固定在页面底部 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%; /* 自适应宽度 */
  max-width: 600px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 15px;
  border-radius: 30px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}

.addMain .el-input {
  width: 100%;
  border-radius: 25px;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  padding-left: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.addMain .el-button {
  border-radius: 50%;
  background-color: #409EFF;
  color: white;
  padding: 10px;
  border: none;
  transition: background-color 0.3s;
}

.addMain .el-button:hover {
  background-color: #66b1ff; /* 按钮悬浮状态 */
}
</style>
